<template>
	<view>
		<u-navbar placeholder title="商城" :border="false" leftIconSize="0"/>
		<view :style="{height: pageHeight, backgroundColor: '#f5f5f5', position: 'relative'}">
			<view class="shop-search" :style="{backgroundColor: appColor}">
				<view style="flex: 1;">
					<u-search :show-action="false" @click="toSearch" disabled bgColor="#fff" placeholder="商品搜索"></u-search>
				</view>
				<view style="position: relative;right: -4rpx;width: 72rpx;display: flex;align-items: center;justify-content: flex-end;">
					<u-icon @click="changeType" color="#fff" size="32" :name="type === 1 ? 'grid' : 'list-dot'"></u-icon>
				</view>
			</view>
			<view class="shop-cart" v-if="cartCount !== -1" @click="toCart">
				<view style="display: inline-block;position: absolute;right: 0;top: 0;">
					<u-badge :bgColor="appColor" max="99" :value="cartCount"></u-badge>
				</view>
				<text :style="{backgroundColor: '#fff', borderRadius: '50%', color: appColor, fontSize: '88rpx'}" class="iconfont icon-gouwuche1"></text>
			</view>
			<template v-if="type === 1">
				<view style="background-color: #fff;">
					<u-tabs @click="tabClick" :current="curCategory" :lineColor="appColor" :activeStyle="{color: appColor}" :list="goodsCategory"></u-tabs>
				</view>
				<view class="shop-center" :style="{height: scrollViewShop1}">
					<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewShop1}">
						<template v-if="loading">
							<view style="padding: 32rpx;">
								<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 7" :key="i"></u-skeleton>
							</view>
						</template>
						<template v-else-if="!loading && dataList.length === 0">
							<u-empty
							    mode="data"
								icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</template>
						<template v-else-if="!loading && dataList.length > 0">
							<view class="shop-center-box">
								<view @click="toDetail(shop)" class="shop-center-item" v-for="shop in dataList" :key="shop.id">
									<u--image mode="aspectFill" :src="shop.image[0].url" width="100%" height="300rpx"></u--image>
									<view class="shop-center-item-name u-line-2">{{shop.goodsName}}</view>
									<view class="shop-center-item-price">
										<view class="shop-center-item-price-l">
											<text>&yen;{{shop.price}}</text>	
											<text style="padding-left: 8rpx;font-size: 28rpx;color: #999;text-decoration: line-through;">&yen;{{shop.oldPrice}}</text>
										</view>
										<view class="shop-center-item-price-r">
											<text>已售{{shop.salesNum}}</text>
										</view>
									</view>
								</view>
								<view style="width: 100%;">
									<u-loadmore :status="status" />
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</template>
			<template v-if="type === 2">
				<view class="shop-left" :style="{height: scrollViewShop}">
					<scroll-view :scroll-y="true" :style="{height: scrollViewShop}">
						<view @click="tabClick({index: index})" class="shop-left-item" :style="{'backgroundColor': index === curCategory ? '#fff' : 'transparent', 'color': index === curCategory ? appColor : '#000'}" v-for="(category, index) in goodsCategory" :key="category.id">{{category.name}}</view>
					</scroll-view>
				</view>
				<view class="shop-right" :style="{height: scrollViewShop}">
					<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewShop, backgroundColor: '#fff'}">
						<template v-if="loading">
							<view style="padding: 32rpx;">
								<u-skeleton avatarSize="48" avatarShape="square" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 7" :key="i"></u-skeleton>
							</view>
						</template>
						<template v-else-if="!loading && dataList.length === 0">
							<u-empty
							    mode="data"
								icon="http://cdn.uviewui.com/uview/empty/data.png"
							>
							</u-empty>
						</template>
						<template v-else-if="!loading && dataList.length > 0">
							<view @click="toDetail(shop)" v-for="(shop, index) in dataList" :key="shop.id" :class="['shop-right-item', index === dataList.length-1 ? null : 'u-border-bottom']">
								<u--image radius="16rpx" mode="aspectFill" :src="shop.image[0].url" width="172rpx" height="172rpx"></u--image>
								<view style="width: 16rpx;"/>
								<view class="shop-right-item-r">
									<view class="shop-right-item-t">
										<view style="font-size: 28rpx;line-height: 32rpx;color: #000;" class="u-line-2">{{shop.goodsName}}</view>
										<view style="padding-top: 8rpx;color: #999;font-size: 24rpx;" class="">已售 {{shop.salesNum}}</view>
									</view>
									<view class="shop-right-item-b">
										<view style="display: flex;align-items: center;">
											<text :style="{color: appColor, fontSize: '32rpx'}">&yen;{{shop.price}}</text>
											<text style="padding-left: 8rpx;font-size: 28rpx;color: #999;text-decoration: line-through;">&yen;{{shop.oldPrice}}</text>
										</view>
										<text :style="{color: appColor, fontSize: '48rpx'}" class="iconfont icon-gouwuche1"></text>
									</view>
								</view>
							</view>
							<u-loadmore :status="status" />
						</template>
					</scroll-view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import {goodsList, goodsCart} from '@/api/shop.js';
	import {getToken} from '@/utils/auth.js';
	export default {
		data() {
			return {
				curCategory: 0, // 当前选中项目
				loading: true,
				type: 1, // 标识是哪种展示形式 1平铺  2列表
				pageNo: 1,
				pageSize: 8,
				dataList: [], // 商品列表
				status: 'loadmore',
			}
		},
		computed: {
			...mapState(['goodsCategory', 'cartCount', 'userInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 50 - 1 + this.statusBarHeight + 'px';
			},
			scrollViewShop() {
				return this.scrollHeight - 50 - 1 - 44 - 34 - 32 + 'px';;
			},
			scrollViewShop1() {
				return this.scrollHeight - 50 - 1 - 44 - 34 - 32 - 44 + 'px';;
			},
			pageHeight() {
				return this.scrollHeight - 50 - 1 - 44 + 'px';
			}
		},
		methods: {
			...mapActions(['setCartCount']),
			// 改变类型
			changeType() {
				this.type = this.type === 1 ? 2 : 1
			},
			// 前往购物车
			toCart() {
				let url = '/pages/shop/shopCart'
				this.$cuNavigateTo(url);
			},
			// 种类改变
			tabClick({index}) {
				this.curCategory = index;
				this.pageNo = 1;
				this.getGoodsList();
			},
			// 详情页面
			toDetail({id, goodsCategory}) {
				uni.navigateTo({
					url: `/pages/shop/shopDetail?id=${id}&goodsCategory=${goodsCategory}`
				});
			},
			// 前往搜索
			toSearch() {
				uni.navigateTo({
					url: '/pages/shop/search'
				});
			},
			onLower() {
				if(this.status === 'loading') {
					this.getGoodsList();
				}
			},
			// 获取认养列表
			getGoodsList() {
				if(this.goodsCategory.length === 0) {
					this.loading = false;
					return
				};
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let postObj = {
					goodsCategory: this.goodsCategory[this.curCategory].id,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}
				goodsList(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.dataList = empty.concat(records);
					} else {
						this.dataList = this.dataList.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				});
			},
		},
		created() {
			this.getGoodsList();
			let isLogin = !getToken() && (Object.keys(this.userInfo).length == 0);
			// 未登录
			if(isLogin) {
				this.setCartCount({cartCount: -1});
			} else {
				goodsCart().then(res => {
					this.setCartCount({cartCount: res.result.total});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-search {
		padding: 16px;
		display: flex;
	}
	.shop-cart {
		position: absolute;
		right: 32rpx;
		top: 70%;
		z-index: 100;
	}
	.shop-center {
		.shop-center-box {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			.shop-center-item {
				width: 48%;
				margin-bottom: 32rpx;
				border-radius: 16rpx;
				background-color: #fff;
				overflow: hidden;
				&:nth-child(odd) {
					margin-right: 4%;
				}
				.shop-center-item-name {
					font-size: 28rpx;
					color: #000;
					padding: 0 16rpx;
					margin-top: 16rpx;
				}
				.shop-center-item-price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16rpx;
					padding-top: 8rpx;
					.shop-center-item-price-l {
						font-size: 32rpx;
						color: #f40215;
					}
					.shop-center-item-price-r {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
	.shop-left {
		width: 160rpx;
		float: left;
		.shop-left-item {
			width: 158rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.shop-right {
		float: left;
		width: calc(100vw - 160rpx);
		.shop-right-item {
			width: 100%;
			height: 220rpx;
			background-color: #fff;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.shop-right-item-r {
				flex: 1;
				height: 100%;
				padding: 8rpx 0;
				box-sizing: border-box;
				.shop-right-item-t {
					height: calc(100% - 48rpx);
				}
				.shop-right-item-b {
					height: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
</style>